<template>
  <div>
    <!-- <form runat="server" id="kefuText" style="width: 400px; margin-left: 35%; margin-top: 20%">
        <div style="text-align: center;">
          当前客服账户未绑定温商贷账户。请输入温商贷账户ID进行绑定。
        </div>
        <div style="text-align: center; margin-top: 15px;">
          用户名：
          <asp:TextBox runat="server" ID="WsloanID"></asp:TextBox>
          <br />
        </div>
        <div style="text-align: center; margin-top: 15px;">
          密&nbsp;码：
          <asp:TextBox runat="server" ID="WsloanPas" TextMode="Password"></asp:TextBox>
          <br />
        </div>
        <div style="text-align: center; margin-top: 15px;">
          <asp:Button Text="确定" runat="server" OnClick="Button1_Click" />
        </div>
      </form> -->
    <div id="kefuBody" class="keBody" style="display: block">
      <div class="kePublic">
        <!--效果html开始-->
        <div class="content">
          <div class="chatBox">
            <div class="chatLeft">
              <div class="chat03">
                <div class="chat03_title">
                  <div onclick="changetable(0)" class="chat03_title_t">
                    <label>个人聊天</label>
                  </div>
                  <div onclick="changetable(2)" class="chat05_title_t">
                    <label>群聊</label>
                  </div>
                  <div onclick="changetable(1)" class="chat04_title_t">
                    <label>通讯录</label>
                  </div>
                </div>
                <div class="chat03_content">
                  <ul id="haoyoulist" class="personal" style="overflow: auto; height: 750px;">
                  </ul>
                  <ul id="grouplist" class="groupchat" style="display: none; overflow: auto; height: 750px;">
                  </ul>
                  <ul id="maillist" class="personal" style="display: none; overflow: auto; height: 750px;">
                    <%=mailHtml %>
                  </ul>
                </div>
              </div>
            </div>
            <div class="chatMiddle">
              <div class="chat01_title">
                <ul class="talkTo">
                  <li>
                    <a href="javascript:;"></a>
                  </li>
                </ul>
                <a class="close_btn" href="javascript:;"></a>
              </div>
              <div class="chat01" id="chatContentNav">
                <div id="J_demo" class="chat01_content" style="width: 100%;"></div>
              </div>
              <div class="chat02" style="display: none;">
                <div class="chat02_title">
                  <a class="chat02_title_btn ctb01" id="myEmotTrigger" href="javascript:;">表情</a>
                  <a class="chat02_title_btn ctb02" id="myImageTrigger" href="javascript:;" title="选择图片">图片</a>
                  <input type="file" id="J_fileInput" style="display: none;" accept="image/*" />
                  <div class="my-soft-input">
                    <div id="myEmotBox" style="display: none"></div>
                  </div>
                </div>
                <div class="chat02_content">
                  <%--<div contenteditable="true" id="textarea"></div>--%>
                    <textarea id="textarea"></textarea>
                </div>
                <div class="chat02_bar">
                  <ul>
                    <li style="right: 5px; top: 5px;">
                      <a href="javascript:;">
                        <img src="img/send_btn.jpg"></a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            <div class="chatRight">
              <div class="chat03">
                <div class="chat03_title">
                  <div onclick="changetable2(0)" class="chat03_title_t">
                    <label>资料</label>
                  </div>
                  <div onclick="changetable2(1)" class="chat05_title_t">
                    <label>标签</label>
                  </div>
                  <div onclick="changetable2(2)" class="chat04_title_t">
                    <label>常见问题</label>
                  </div>
                </div>
                <div>
                  <div id="userdata" style="overflow: auto; height: 750px;">
                    <table width="100%" border="0" cellspacing="10" cellpadding="0">
                      <tr>
                        <td width="25%" height="25" align="right" class="tabtd2">用户id：</td>
                        <td width="75%" height="25" class="tabtd userdata_id"></td>
                      </tr>
                      <tr>
                        <td height="25" align="right" class="tabtd2">用户名：</td>
                        <td height="25" class="tabtd userdata_userno"></td>
                      </tr>
                      <tr>
                        <td height="25" align="right" class="tabtd2">姓名：</td>
                        <td height="25" class="tabtd userdata_name"></td>
                      </tr>
                      <tr>
                        <td height="25" align="right" class="tabtd2">性别：</td>
                        <td height="25" class="tabtd userdata_sex"></td>
                      </tr>
                      <tr>
                        <td height="25" align="right" class="tabtd2">开户情况：</td>
                        <td height="25" class="tabtd userdata_kaihuqk"></td>
                      </tr>
                      <tr>
                        <td height="25" align="right" class="tabtd2">VIP等级：</td>
                        <td height="25" class="tabtd userdata_vip"></td>
                      </tr>
                      <tr>
                        <td height="25" align="right" class="tabtd2">手机号码：</td>
                        <td height="25" class="tabtd userdata_tel"></td>
                      </tr>
                      <tr>
                        <td height="25" align="right" class="tabtd2">地区：</td>
                        <td height="25" class="tabtd userdata_city"></td>
                      </tr>
                      <tr>
                        <td height="25" align="right" class="tabtd2">银行卡号码：</td>
                        <td height="25" class="tabtd userdata_bank"></td>
                      </tr>
                      <tr>
                        <td height="25" align="right" class="tabtd2">账户余额：</td>
                        <td height="25" class="tabtd userdata_zhye"></td>
                      </tr>
                      <tr>
                        <td height="25" align="right" class="tabtd2">待收金额：</td>
                        <td height="25" class="tabtd userdata_dsje"></td>
                      </tr>
                      <tr>
                        <td height="25" align="right" class="tabtd2">待收利息：</td>
                        <td height="25" class="tabtd userdata_dslx"></td>
                      </tr>
                    </table>
                  </div>
                  <div id="usertag" style="overflow: auto; height: 750px; display: none;">
                    <iframe width="100%" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto" name="nr" id="nr"></iframe>
                  </div>
                  <div id="problem" style="overflow: auto; height: 750px; display: none;">
                    <div class="problem_li">
                      <div class="chat03_name">
                        <input id="problemSearchkey" type="text" property="搜索" />
                        <button onclick="searchProblem()">搜索</button>
                      </div>
                    </div>
                    <ul id="problem_ul">
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div style="clear: both;">
            </div>
          </div>
        </div>
        <!--效果html结束-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'chat',
  data() {
    return {

    }
  },
  mounted() {
    // document.getElementById("kefuText").style.display = "none";
    // document.getElementById("kefuBody").style.display = "block";
    // function htsHide() {
    //   $(".hovertreeshowlayer img").remove();
    //   $(".hovertreeshowcover").hide();
    //   $(".hovertreeshowlayer").hide();
    // }
    // $("#chatContentNav").on("click", ".tribemsgimage", function() {
    //   if ($(".hovertreeshowcover").length == 0) {
    //     $("body").append("<div class='hovertreeshowcover'></div>").append("<div class='hovertreeshowlayer'></div>")

    //     $(".hovertreeshowcover").on("click", function() { htsHide(); })
    //     $(".hovertreeshowlayer").on("click", function() { htsHide(); })
    //   }
    //   else {
    //     $(".hovertreeshowcover").show();
    //     $(".hovertreeshowlayer").show();
    //   }
    //   $(".hovertreeshowlayer").append("<img style='height:800px;' src='" + this.src + "' />")
    // });

    // $("#myImageTrigger").on("click", function() {
    //   $("#J_fileInput").click();
    // });

    // var fileInput = document.getElementById('J_fileInput');

    // fileInput.onchange = function() {
    //   var e = new Date(), f = "";
    //   WKIT.Conn.sdk.Plugin.Image.upload({
    //     target: fileInput,
    //     success: function(data) {
    //       var msg = "<img class='tribemsgimage' style='height:200px;' src='" + data.data.base64Str + "'/>";
    //       WKIT.Conn.sdk.Tribe.sendMsg({
    //         tid: tribeid,
    //         msg: data.data.url,
    //         msgType: 1,
    //         success: function(msgdata) {
    //           var userimg = picurl + "yhtx/" + '<%=localUser.cYhtx%>';
    //           var nickname = '<%=localUser.cNichen%>';
    //           f += e.getFullYear() + "-", f += e.getMonth() + 1 + "-", f += e.getDate() + "  ", f += e.getHours() + ":", f += e.getMinutes() + ":", f += e.getSeconds();

    //           var i = "<div class='message clearfix'><div class='user-logo'><img src='" + userimg + "'/>" + "</div>" +
    //             "<div class='wrap-text'>" + "<h5 class='clearfix'>" + nickname + "</h5>" + "<div>" + msg + "</div>" +
    //             "</div>" + "<div class='wrap-ri'>" + "<div clsss='clearfix'><span>" + f + "</span></div>" + "</div>" +
    //             "<div style='clear:both;'></div>" + "</div>";
    //           $("#Tribe_" + tribeid).append(i), $("#Tribe_" + tribeid).scrollTop($("#Tribe_" + tribeid)[0].scrollHeight);

    //           console.log('发送群消息成功', msgdata);
    //         },
    //         error: function(msgerror) {
    //           console.log('发送群消息失败', msgerror);
    //         }
    //       });

    //       console.log('上传成功', data);
    //     },
    //     error: function(error) {
    //       console.log('上传失败', error);
    //     }
    //   });
    // }
    // setTimeout('initWkit()', 500);
    // setTimeout('Msg()', 2000);
    // setTimeout('emjor()', 2000);
  }
}
</script>
